<template>
	<div id="temp">
		<!-- 轮播图 -->
		<slider :imgs="list"></slider>

		<!--  mui实现九宫格导航  -->
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/news/newsList">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">新闻资讯</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/photo/photoList">
						<span class="mui-icon mui-icon-email"></span>
						<div class="mui-media-body">图片分享</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/goods/goodsList">
						<span class="mui-icon mui-icon-chatbubble"></span>
						<div class="mui-media-body">商品购买</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/callme">
						<span class="mui-icon mui-icon-location"></span>
						<div class="mui-media-body">留言反馈</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/video">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">视频专区</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/contact">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">联系我们</div>
					</router-link>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	import slider from './subcom/slider.vue';
	import { Toast } from 'mint-ui';
	export default {
		components: {
			slider
		},
		data() {
			return {
				list: []
			}
		},
		methods: {
			getImgs() {
				var url = this.$common.apidomain + '/api/getlunbo';
				this.$http.get(url).then(function(res) {
					console.log(res.body.message);
					//当请求错误时弹出提示信息 并且退出
					if(res.body.status != 0) {
						Toast('请求错误');
						return;
					}
					
					this.list = res.body.message;
				});
			}
		},
		created() {
			this.getImgs();
		}

	}
</script>

<style scoped>
	
	.mui-content,.mui-content ul{
		background-color: #fff;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border-right:0px;
		border-bottom:0px; 
	}
	.mui-grid-view.mui-grid-9{
		border-top:0px;
		border-left:0px; 
	}
	.mui-icon-home:before,
	.mui-icon-email:before,
	.mui-icon-chatbubble:before,
	.mui-icon-location:before,
	.mui-icon-search:before,
	.mui-icon-phone:before{
		content: '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	
	.mui-icon-home:before{		
		background-image: url(../../statics/imgs/1.png);
	}

	.mui-icon-email:before{		
		background-image: url(../../statics/imgs/2.png);		
	}
	.mui-icon-chatbubble:before{		
		background-image: url(../../statics/imgs/3.png);		
	}
	.mui-icon-location:before{		
		background-image: url(../../statics/imgs/4.png);		
	}
	.mui-icon-search:before{		
		background-image: url(../../statics/imgs/5.png);		
	}
	.mui-icon-phone:before{		
		background-image: url(../../statics/imgs/6.png);		
	}
</style>